<template>
  <div id="courselibrary_manage" class="container">
    <div class="content">
      <!-- <div class="title">课程库</div> -->
      <div style="height:0.48rem;position: relative;">
        <div class="title_syn" @click="syncCourse" v-if="hasApi('libraryCourseSync')">同步双师英语课程</div>
      </div>
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <el-select
              style="width:12%;float: left;"
              v-model="tabledisplayObj.isPublished"
              clearable
              placeholder="课程状态"
            >
              <el-option
                v-for="item in isPublishedList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-cascader
              style="width:12%;float: left;margin-left:.1rem; "
              :key="isResouceShow"
              v-model="selectSubjectId"
              :options="subjectList"
              :props="{ checkStrictly: true }"
              placeholder="科目"
            ></el-cascader>
            <!-- <el-select
              style="width:12%;float: left;margin-left:.1rem; "
              v-model="tabledisplayObj.subjectId"
              clearable
              placeholder="科目"
            >
              <el-option
                v-for="item in subjectList"
                :key="item.subjectId"
                :label="item.name"
                :value="item.subjectId"
              ></el-option>
            </el-select>-->
            <div style="width:2.68rem;float: left;margin-left:.1rem;">
              <el-select
                v-model="tabledisplayObj.startSuitableAge"
                @change="ageStartChange()"
                clearable
                style="width: 1.2rem;"
                placeholder="开始年龄"
              >
                <el-option
                  v-for="item in ageStartList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                  v-show="item.show"
                ></el-option>
              </el-select>&nbsp;~
              <el-select
                v-model="tabledisplayObj.endSuitableAge"
                @change="ageEndChange()"
                clearable
                style="width: 1.2rem;"
                placeholder="结束年龄"
              >
                <el-option
                  v-for="item in ageEndList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                  v-show="item.show"
                ></el-option>
              </el-select>
            </div>
            <el-input
              v-model="tabledisplayObj.courseName"
              style="width:12%;float: left;margin-left:.1rem;"
              placeholder="输入课程名称"
              class="input_search"
              clearable
            ></el-input>
            <div
              class="search_btn"
              style="margin-left:0.1rem;"
              @click="searchCourse"
              v-if="hasApi('libraryCourseList')"
            >搜索</div>
            <div class="btn_user_defined" style="margin-left:0.1rem;" @click="reset">重置</div>
            <div
              class="right_btn"
              v-if="hasApi('libraryCourseAdd')"
              @click="addCreateCourse"
            >新&nbsp&nbsp增</div>
          </div>
        </div>
        <div>
          <table class="table" cellspacing="0">
            <thead class="thead">
              <tr>
                <td style="width: 5rem;">课程名称</td>
                <td style="width: 2rem;">科目</td>
                <td style="width: 1.5rem;">适用年龄</td>
                <td style="width: 2rem;">时长(分钟/节)</td>
                <td style="width: 1.5rem;">课节数(节)</td>
                <td style="width: 2rem;">创建日期</td>
                <td style="width: 1.5rem;">状态</td>
                <td style="width: 4rem;">操作</td>
              </tr>
            </thead>
            <tbody class="tbody">
              <tr v-for="item,index in courseLibraryList">
                <td>
                  <div style="display: flex;justify-content: center;align-items: center;">
                    <div>{{item.libraryCourseName}}</div>
                    <div v-if="item.feiboCoursePackageId != null" class="name_img"></div>
                  </div>
                </td>
                <td v-if="item.subSubjectName == null">{{item.subjectName}}</td>
                <td v-else>{{item.subjectName}} / {{item.subSubjectName}}</td>
                <td>{{item.minSuitableAge}}岁~{{item.maxSuitableAge}}岁</td>
                <td>{{item.oneSyllabusDuration}}</td>
                <td>{{item.syllabusNum}}</td>
                <td>{{item.createTime}}</td>
                <td>{{item.isPublished == '0'?'待发布':'已发布'}}</td>
                <td>
                  <span
                    v-if="item.isPublished == '0' && hasApi('libraryCourseUpdate')"
                    class="operate_btn"
                    @click="handleEdit(index,item)"
                  >编辑&nbsp;</span>
                  <span
                    v-if="item.isPublished == '0' && hasApi('libraryCourseDelete')"
                    class="operate_btn"
                    @click="handleDelete(index,item)"
                  >删除&nbsp;</span>
                  <span
                    class="operate_btn"
                    v-if="hasApi('librarySyllabusList')"
                    @click="handRes(index,item)"
                  >资源配置&nbsp;</span>
                  <span
                    v-if="hasApi('libraryCourseStatus')"
                    class="operate_btn"
                    @click="handPulish(index,item)"
                  >{{item.isPublished == '0'?'发布':'取消发布'}}</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="tabledisplayObj.currPage"
          @size-change="pageSizeChange"
          @current-change="tabledisplayChangePage"
          :total="tabledisplayObj.total"
        ></el-pagination>
        <!--新建课程组件\编辑课程组件-->
        <crateCourse ref="crateCourse" @callback="closeAdd"></crateCourse>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import crateCourse from "./common/crateCourse";
let vm;
let user;
export default {
  components: {
    crateCourse
  },
  data() {
    return {
      courseLibraryList: [], //课程库数据
      tabledisplayObj: {
        isPublished: "", //状态
        subjectId: "", //科目
        startSuitableAge: "", //适用年龄
        endSuitableAge: "",
        courseName: "", //课程名
        currPage: 1,
        orgId: "",
        pageSize: 10,
        total: 0
      },
      isResouceShow:1,
      selectSubjectId:[],//筛选科目的数组
      ageStartList: [], //筛选适用年龄数据
      ageEndList: [], //筛选适用年龄数据
      subjectList: [], //筛选科目数据
      isPublishedList: [
        {
          name: "待发布",
          value: 0
        },
        {
          name: "已发布",
          value: 1
        }
      ] //发布状态数据
    };
  },
  methods: {
    /**同步双师课程 */
    syncCourse() {
      let loading = vm.$loading({
        target: document.querySelector("#courselibrary_manage"),
        text: "正在同步，请稍后...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      api.libraryCourseSync().then(function(data) {
        if (data.resultCode == 2000) {
          vm.$message({
            message: "同步双师课程成功",
            type: "success"
          });
          loading.close();
          vm.initData();
        } else {
          vm.$message.error(data.message);
          loading.close();
        }
      });
    },
    /**重置 */
    reset() {
      vm.tabledisplayObj = {
        isPublished: "", //状态
        subjectId: "", //科目
        startSuitableAge: "", //适用年龄
        endSuitableAge: "",
        courseName: "", //课程名
        currPage: 1,
        orgId: "",
        pageSize: 10,
        total: 0
      };
      vm.selectSubjectId = [];
      vm.initData();
    },
    /**
     * 搜索
     */
    searchCourse() {
      vm.tabledisplayObj.currPage = 1;
      if (vm.selectSubjectId.length == 1) {
        vm.tabledisplayObj.subjectId = vm.selectSubjectId[0];
          vm.tabledisplayObj.subSubjectId ="";
      }else if(vm.selectSubjectId.length == 2){
         vm.tabledisplayObj.subjectId = vm.selectSubjectId[0];
          vm.tabledisplayObj.subSubjectId = vm.selectSubjectId[1];
      } else {
        vm.tabledisplayObj.subjectId = "";
        vm.tabledisplayObj.subSubjectId = "";
      }
      vm.initData();
    },
    initData() {
      vm.tabledisplayObj.orgId = user.orgId;
      api.libraryCourseList(vm.tabledisplayObj).then(function(data) {
        if (data.resultCode == 2000) {
          for (let i = 0; i < data.list.length; i++) {
            data.list[i].createTime = data.list[i].createTime.split(" ")[0];
          }
          vm.courseLibraryList = data.list;
          vm.tabledisplayObj.total = data.totalCount;
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    ageStartChange: function() {
      //开始年龄发生改变
      //限制结束年龄
      vm.ageEndList.forEach(function(item) {
        if (
          !vm.tabledisplayObj.startSuitableAge ||
          parseInt(item.value) >= parseInt(vm.tabledisplayObj.startSuitableAge)
        ) {
          item.show = true;
        } else {
          item.show = false;
        }
      });

      // var age = (vm.ageStart || -1) + "/" + (vm.ageEnd || -1);
    },
    ageEndChange: function() {
      //结束年龄发生改变
      //限制开始年龄
      vm.ageStartList.forEach(function(item) {
        if (
          !vm.tabledisplayObj.endSuitableAge ||
          parseInt(item.value) <= parseInt(vm.tabledisplayObj.endSuitableAge)
        ) {
          item.show = true;
        } else {
          item.show = false;
        }
      });

      // var age = (vm.ageStart || -1) + "/" + (vm.ageEnd || -1);
    },
    /**每页数量改变 */
    pageSizeChange: function(val) {
      this.tabledisplayObj.pageSize = val;
      this.initData();
    },
    /**表格显示形式翻页 */
    tabledisplayChangePage(val) {
      this.tabledisplayObj.currPage = val;
      this.initData();
    },
    /** 新建课程 */
    addCreateCourse() {
      this.$refs.crateCourse.init({});
    },
    /**新建回调 */
    closeAdd() {
      console.log('cloasAdd');
      vm.initSubJectList();
      vm.initData();
    },
    /**课节资源设置回调 */
    closeTeacherSyllabus() {},
    /**编辑 */
    handleEdit(index, item) {
      this.$refs.crateCourse.init(tool.clone(item));
    },
    /**删除 */
    handleDelete(index, item) {
      this.$confirm("此操作将删除该课程库, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          var paras = {
            libraryCourseId: item.libraryCourseId
          };
          api.libraryCourseDelete(paras).then(function(data) {
            console.log(data);
            if (data.resultCode == 2000) {
              vm.$message({
                message: "删除成功",
                type: "success"
              });
              vm.initData();
            } else {
              vm.$message.error(data.message);
            }
          });
        })
        .catch(() => {});
    },
    /**资源配置 */
    handRes(index, item) {
      console.log(item);
      if(item.storageChannel == 2){
        item.courseType = 5;
      }
      var path = vm.$store.state.permit["56"].path;
      //传递参数
      this.$router.push({
        path: path,
        query: {
          libraryCourseId: item.libraryCourseId,
          courseTypeId: item.courseType,
          title: item.libraryCourseName,
          isFrom:"1",
          currPage:1
        }
      });
      // vm.$refs.teacherSyllabus.init({
      //   libraryCourseId: item.libraryCourseId,
      //   courseTypeId: item.courseType
      // });
    },
    /**发布与取消发布 */
    handPulish(index, item) {
      if (item.isPublished == 0) {
        this.$confirm(
          "发布后若校区开课，则不能修改具体内容。是否继续发布?",
          "课程库发布",
          {
            confirmButtonText: "确定",
            cancelButtonText: "再想想",
            type: "warning",
            center: true
          }
        )
          .then(() => {
            var paras = {
              libraryCourseId: item.libraryCourseId,
              isPublished: 1
            };
            api.libraryCourseStatus(paras).then(function(data) {
              if (data.resultCode == 2000) {
                vm.$message({
                  message: "发布成功",
                  type: "success"
                });
                vm.initData();
              } else {
                vm.$confirm(data.message, "无法发布", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                  center: true
                })
                  .then(() => {})
                  .catch(() => {});
              }
            });
          })
          .catch(() => {});
      } else {
        this.$confirm("确定取消发布吗？", "取消发布", {
          confirmButtonText: "确定",
          cancelButtonText: "再想想",
          type: "warning",
          center: true
        })
          .then(() => {
            var paras = {
              libraryCourseId: item.libraryCourseId,
              isPublished: 0
            };
            api.libraryCourseStatus(paras).then(function(data) {
              if (data.resultCode == 2000) {
                vm.$message({
                  message: "取消发布成功",
                  type: "success"
                });
                vm.initData();
              } else {
                vm.$confirm(data.message, "无法取消", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                  center: true
                })
                  .then(() => {})
                  .catch(() => {});
              }
            });
          })
          .catch(() => {});
      }
    },
    initSubJectList(){
      let tempList = [];
      api
      .getSubjectList({
        orgId: user.orgId + ""
      })
      .then(function(data) {
        //枚举科目列表
        if (data.result == "操作成功") {
          data.list.forEach(item => {
            let subList = [];
            item.subSubjectList.forEach(r => {
              subList.push({
                value: r.subSubjectId,
                label: r.subSubjectName
              });
            });
            if (subList.length > 0) {
              tempList.push({
                value: item.subjectId,
                label: item.name,
                children: subList
              });
            } else {
              tempList.push({
                value: item.subjectId,
                label: item.name
              });
            }
          });
          ++vm.isResouceShow;
          vm.subjectList = tempList;
        } else {
          this.$message.error(data.message);
        }
      });
    }
  },
  mounted() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    //获取数据字典
    let dicdata = tool.getItem(lsKey.dict, true);
    for (let i = 0; i < 100; i++) {
      vm.ageStartList.push({ name: "" + i, value: "" + i, show: true });
      vm.ageEndList.push({ name: "" + i, value: "" + i, show: true });
    }
    vm.initSubJectList();
    vm.initData();
  },
};
</script>

<style lang="scss">
#courselibrary_manage {
  .title_syn {
    position: absolute;
    top: 0.05rem;
    right: 0.2rem;
    width: 1.76rem;
    height: 0.38rem;
    line-height: 0.38rem;
    font-size: 0.16rem;
    background-color: #3885f8;
    border-radius: 0.1rem;
    color: #ffffff;
    cursor: pointer;
    font-weight: bold;
    padding-left: 0.2rem;
  }
  .title_syn:hover {
    background-color: rgba(56, 133, 248, 0.8);
  }

  .name_img {
    margin-left: 0.04rem;
    width: 0.42rem;
    height: 0.26rem;
    background-image: url(../../assets/img/common/cooperation.png);
  }
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
  .right_btn {
    background-image: url(../../assets/img/clue_manage/add_white.png);
    width: 1.54rem;
  }
  .btn_user_defined {
    display: inline-block;
    width: 0.8rem;
    padding-left: 0.22rem;
    height: 0.36rem;
    line-height: 0.36rem;
    border-radius: 0.08rem;
    color: white;
    font-size: 0.16rem;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: 0.03rem;
    background-color: #3885f8;
    position: relative;
    top: 0.01rem;
  }
  .btn_user_defined:hover {
    background-color: rgba(56, 133, 248, 0.8);
  }
  // .el-table__expand-icon .el-icon-arrow-right:before {
  //   content: "\e603";
  // }
  // .el-table__expand-icon--expanded {
  //   -webkit-transform: rotate(180deg);
  //   transform: rotate(180deg);
  // }
  .btn_editor {
    font-size: 0.16rem;
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
</style>